<template>
	<div class="chatboxes">
    <Zothertop topname="小小"></Zothertop>
    <div class="maincon clearfix">
      <div class="minicon leftbox clearfix">
        <img src="../../images/IMG_BANNER_4.png">
        <span class="talkbox">
        <img src="../../images/talkarrow.png">
        在吗?</span>
      </div> 
      <div class="minicon rightbox clearfix">
        <img src="../../images/IMG_BANNER_5.png">
        <span class="talkbox">
        <img src="../../images/rightarrow.png">
        在</span>
      </div> 
    </div>
    <Ztalkbottom></Ztalkbottom>
  </div>
  
</template>
<script>
  import Zothertop from "../../components/zothertop.vue"
  import Ztalkbottom from "../../components/ztalkbottom.vue"
  export default {
    name: 'chatboxes',
    data() {
      return {
      }
    },
    components:{
      Zothertop,
      Ztalkbottom
    }

  }
</script>
<style lang="less" scoped>
  .maincon{
    width: 710/75rem;
    height: 100%;
    background-color: #fff;
    box-shadow: 2/75rem 2/75rem 9/75rem rgba(0,0,0,0.1);
    border-radius: 10/75rem;
    font-size: 28/75rem;
    margin:0 20/75rem;
    padding: 1/75rem;
  }
  .minicon{
    margin: 70/75rem 20/75rem;
    width: 100%;
  }
  img{
    width: 80/75rem;
    height: 80/75rem;
  }
  .leftbox,.leftbox img,.leftbox .talkbox{
    float: left;
  }
  .rightbox,.rightbox img,.rightbox .talkbox{
    float: right;
  } 
  .leftbox .talkbox{
    margin-left: 30/75rem;
  }
  .talkbox img{
    height: 10/75rem;
    width: 20/75rem;
  }
  .leftbox .talkbox img{
    position: absolute;
    top: 10/75rem;
    display: block;
    float: left;
    left: -20/75rem;
  } 
  .rightbox .talkbox img{
    position: absolute;
    top: 10/75rem;
    display: block;
    float: right;
    right: -20/75rem;
  } 
  .rightbox .talkbox{
    margin-right: 30/75rem;
  }
  .talkbox{
    display: inline-block;
    border: 1px solid #ff406f;
    padding: 10/75rem 30/75rem;
    margin-top: 15/75rem;
    border-radius: 5/75rem;
    position:relative;
  }
</style>